import { TodoHeader } from "@todos/components/TodoHeader";
import { TodoList } from "@todos/components/TodoList";
import { TodoFooter } from "@todos/components/TodoFooter";
import { useAppSelector } from "@todos/hooks/redux";

function Todos() {
  const { todos, filter } = useAppSelector((state) => state.todos);

  const filteredTodos = todos.filter((todo) => {
    if (filter === "done") return todo.isDone;
    if (filter === "todo") return !todo.isDone;
    return true;
  });

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-2xl mx-auto space-y-8 px-4">
        <h1 className="text-3xl font-bold text-center text-gray-800">
          Todo MVC
        </h1>

        <div className="bg-white p-6 rounded-xl shadow-lg space-y-6">
          <TodoHeader />
          <TodoList todos={filteredTodos} />
          <TodoFooter />
        </div>
      </div>
    </div>
  );
}

export default Todos;
